import userModel from './userModel';
import searchTool from './searchTool';
import baseTable from '@/components/baseTable/index';
import { treeselect } from '@/api/system/dept'

const tableHead = [
  {
    title: '用户编号',
    dataIndex: 'userId',
    ellipsis: true,
    ellipsis: true,
    hide: false,
    align: 'center'
  },
  {
    title: '用户名称',
    dataIndex: 'userName',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '部门',
    dataIndex: 'dept.deptName',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '手机号码',
    dataIndex: 'phonenumber',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
    ellipsis: true,
    align: 'center'
  },
  {
    title: '创建日期',
    dataIndex: 'createTime',
    defaultSortOrder: 'ascend',
    sorter: (a, b) => a.date > b.date,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 230,
    align: 'center'
  }
];
export default {
  name: 'listPage',
  components: { baseTable, userModel, searchTool },
  filters: {
    statusFilter(status) {
      const statusList = {
        admin: '#f50',
        test: '#2db7f5',
        editor: '#87d068',
        custom: ''
      };
      return statusList[status];
    }
  },
  data() {
    return {
      tableQuery: {
        role: null,
        username: '',
        startTime: '',
        endTime: ''
      },
      loading: false,
      deleteLoading: false,
      tableData: [],
      dialogVisible: false,
      tableHead,
      treeData: [],
      statusOptions: [],
      showSearch: true,
      toolSearchVisible: false,
      queryParam: {
        deptId: '',
        deptName: ''
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      tableHeight : document.documentElement.clientHeight - 468 + 'px',
      treeHeight : document.documentElement.clientHeight - 150,
    };
  },
  mounted() {
    this.getTreeselect();
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
    this.$refs.userTable.queryTable(this.queryParam);

    window.onresize = function () {
      if (this.showSearch) {
        this.tableHeight = document.documentElement.clientHeight - 468 + 'px';
      } else {
        this.tableHeight = document.documentElement.clientHeight - 334 + 'px';
      }
      this.treeHeight = document.documentElement.clientHeight - 150;
    }
  },
  methods: {
    statusHandleChange(value) {
      this.queryParam.status = value.key;
    },
    selectDept(selectedKeys, e) {
      this.queryParam.deptName = e.selectedNodes[0].componentOptions.propsData.title;
      this.queryParam.deptId = selectedKeys[0];
      this.$refs.userTable.queryTable(this.queryParam);
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.treeData = response.data
      })
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.queryForm.resetFields();
      this.queryParam = {};
      this.$refs.userTable.queryTable(this.queryParam);
    },
    /**
     * 打开高级搜索框
     */
    toolSearch() {
      this.toolSearchVisible = true;
    },
    //高级搜索
    searchToolOk(data) {
      this.toolSearchVisible = false;
      this.$refs.userTable.queryTable(data);
    },
    changeRole(val) {
      this.tableQuery.role = val;
    },
    changeTime(str, time) {
      Object.assign(this.tableQuery, {
        startTime: time[0],
        endTime: time[1]
      });
    },
    //查询
    handleSearch() {
      this.$refs.userTable.queryTable(this.queryParam);
    },
    //删除
    handleDelete(val) {
    },
    //批量删除
    handleBatchDelete() {
      // if (this.selectValue.length == 0) {
        this.$message.warning('请至少勾选一项');
      //   return;
      // }
      this.deleteLoading = true;
      // const batchId = this.selectValue.map(item => item.id).join(',');
    },
    //编辑
    handleEdit(row) {
      //这里还需要通过id获取用户对应的菜单，这里就不写了。
      this.dialogVisible = true;
    },
    //新增
    handleAdd() {
      this.dialogVisible = true;
    },
    handleOk() {
      this.dialogVisible = false;
    },
    showSearchHandle() {
      this.showSearch = !this.showSearch
      if (this.showSearch) {
        this.tableHeight = document.documentElement.clientHeight - 468 + 'px'
      } else {
        this.tableHeight = document.documentElement.clientHeight - 334 + 'px'
      }
    }
  }
};